*{
    margin: 0;
    padding: 0;
}
html,body{ font-family: PingFang SC,Helvetica Neue,Helvetica,STHeiTi; background-color: #fff; }
button{ background-color: transparent; border: none; }
canvas{ display: block; position: fixed; left: 0; top: 0; }
#back{ z-index: 10; background: url('../images/back-image.png') no-repeat; background-size: 100% auto; }
#canvas{ z-index: 30; }
#progress{ position: fixed; left: 0; top: 0; z-index: 20; }
.loading{
	width: 2.9rem;
	height: 1.5rem;
	margin: 0 auto;
	margin-top: 10rem;
}
.loading > span{
	display: inline-block;
	width: .3rem;
	height: 1.5rem;
	border-radius: .15rem;
	/*margin-right: 0.25rem;*/
	background: lightgreen;
	-webkit-animation: load .6s ease infinite;
}
.loading > span:nth-child(2){
	-webkit-animation-delay:0.15s;
}
.loading > span:nth-child(3){
	-webkit-animation-delay:0.25s;
}
.loading > span:nth-child(4){
	-webkit-animation-delay:0.35s;
}
.loading > span:nth-child(5){
	-webkit-animation-delay:0.45s;
}
@-webkit-keyframes load{
	0%,100%{
		height: 1.5rem;
		background: lightgreen;
	}
	50%{
		height: 2.3rem;
		margin-top: -0.4rem;
		margin-bottom: -0.4rem;
		background: lightblue;
	}
}

.home{ width: 100%; height: 100vh; background: url('../images/image-start.png') no-repeat; background-size: 100% auto; }
.image-title{ width: 80%; margin: 3rem 0 0 10%; }
.image-button{ width: 40%; margin: 14rem 0 0 30%; }
.game-over{ z-index: 40; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.7); }
.success{ width: 80%; margin: 5rem 0 0 10%; }
.results-text{ display: inline-block; width: 100%; color: #fff; font-size: 1rem; text-align: center; margin-top: 2rem; }
.game-button{ color: #fff; display: block; background-color: #41bd43; font-size: 0.8rem; padding: 0.4rem 1.5rem; border-radius: 0.2rem; margin: 3rem auto; }